<template>
    <div class="template pec">
        <div class="nav newNav">
            <img :src="recipepage_back" style="width: 42px;" @click="router.back()"/>
            <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">{{ route.query.type == 0 ? recipeList[route.query.id].type : 'Recipe'}}</div>
            <img :src="recipepage_collect_icon"  style="width: 24px;" v-if="collect == 1" @click="chengeCollect(0)"/>
            <img :src="recipepage_collect_default_icon" style="width: 24px;" v-if="collect == 0" @click="chengeCollect(1)"/>
        </div>
        <img :src="recipesList[route.query.id]" style="width: 100%;min-height: 35vh" v-if="route.query.type == 0"/>
        <img :src="myData.img" style="width: 100%;min-height: 35vh" v-else/>
        <div class="infoShow">
            <div class="tip">RECIPE</div>
            <div class="name">{{ name }}</div>
            <van-rate v-model="rate" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" @change="onChange" clearable/>
            <div class="tip" style="font-size: 14px;">Be the first to rate</div>
            <div style="width: 100%;padding-left: 30px;">
                <img :src="Ingredients" style="width: 114px;" />
            </div>
            <div class="peifang">
                <div v-for="(item, index) in peifangList.slice(0,3)" :key="index" class="peifangItem">
                    <img :src="recipe_ingredients_img" style="height: 100%;"/>
                    <div class="peifangInfo">
                        <div class="namePF">
                            <div class="aa">{{ item.name }}</div>
                        </div>
                        <div class="num">
                            <div class="aa">{{ item.num }}</div></div>
                    </div>
                </div>

            </div>
            <img :src="recipe_preview_button" style="width: 85%;" @click="router.push('/recipesDetails?type='+route.query.type+'&id='+route.query.id)">
        </div>
        

    </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { recipeList } from '../recipe'
import recipes1 from '../assets/recipesImg/recipes1.png'
import recipes2 from '../assets/recipesImg/recipes2.png'
import recipes3 from '../assets/recipesImg/recipes3.png'
import recipes4 from '../assets/recipesImg/recipes4.png'
import recipes5 from '../assets/recipesImg/recipes5.png'
import recipes6 from '../assets/recipesImg/recipes6.png'
import recipepage_back from '../assets/recipepage_back.png'
import Ingredients from '../assets/Ingredients.png'
import recipe_preview_button from '../assets/recipe_preview_button.png'
import recipepage_collect_default_icon from '../assets/recipepage_collect_default_icon.png'
import recipepage_collect_icon from '../assets/recipepage_collect_icon.png'
import recipe_ingredients_img from '../assets/recipe_ingredients_img.png'
import { onMounted, ref } from 'vue'
const recipesList = [recipes1, recipes2, recipes3, recipes4, recipes5, recipes6]
const route = useRoute()
const router = useRouter()
const rate = ref(0)
const collect = ref(0)
const peifangList = ref([])
const name = ref('')
const myData = ref([])
onMounted(() => {
    peifangList.value = route.query.type == 0 ? recipeList[route.query.id].ingredients : JSON.parse(localStorage.getItem('recipeList'))[route.query.id].ingredients
    if (route.query.type == 0) {
        let data = JSON.parse(localStorage.getItem('recipeXT'))[route.query.id]
        name.value = recipeList[route.query.id].name
        collect.value = data.collect
        rate.value = data.rate
    }else{
        let data = JSON.parse(localStorage.getItem('recipeList'))[route.query.id]
        myData.value = data
        name.value = data.name
        collect.value = data.collect
        rate.value = data.rate
    }
})
const chengeCollect = (index) => {
    collect.value = index
    if (route.query.type == 0) {
        let data = JSON.parse(localStorage.getItem('recipeXT'))
        data[route.query.id].collect = index
        localStorage.setItem('recipeXT', JSON.stringify(data))
    }
}
const onChange = (value) => {
    if (route.query.type == 0) {
        let data = JSON.parse(localStorage.getItem('recipeXT'))
        data[route.query.id].rate = value
        localStorage.setItem('recipeXT', JSON.stringify(data))
    }else {
        let data = JSON.parse(localStorage.getItem('recipeList'))
        data[route.query.id].rate = value
        localStorage.setItem('recipeList', JSON.stringify(data))
    }
}
</script>
<style scoped>
@import '../font/font.css';
.pec {
    display: flex;
    flex-direction: column;
}
.infoShow {
    background-color: #fff;
    border-radius: 53px 53px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 29vh;
    width: 100%;
    height: 100vh;
}
.newNav {
    position: fixed;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 30px;
    color: #fff;
    font-weight: Regular;
    font-family: BalooChettan-Regular;
}
.tip {
    font-family: ArialItalic;
    font-size: 14px;
    color: #737373;
    margin-top: 10px;
}
.name {
    font-family: BalooChettan-Regular;
    font-weight: 400;
    font-size: 32px;
    line-height: 30px;
    color: #013F4E;
    width: 90%;
    text-align: center;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
    word-wrap: break-word;
}
.peifang {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    height: 34.5vh;
    overflow-y: auto;
    margin-top: 10px;
}
.peifangItem {
    margin-bottom: 10px;
    display: flex;
    height: 10vh;
    background-color: #fff;
}
.peifangInfo {
    flex: 1;
    padding-left: 10px;
    display: flex;
}
.namePF {
    /* flex: 2; */
    width: 150px;
    margin-right: 5px;
    font-weight: bold;
    font-size: 16px;
    color: #013F4E;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    word-wrap: break-word;
}
.num {
    width: 80px;
    font-weight: 400;
    font-size: 16px;
    color: #161616;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    word-wrap: break-word;

}
.aa {
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
    word-wrap: break-word;
}
</style>